<template>
	<view>
		<!-- 头部背景 -->
		<view class="headCss"></view>
		<!-- 地图 -->
		<view class="headText">
			<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers" scale="14" show-location />
		</view>

		<view class="headText" style="margin-top: 20rpx;">
			<view class="helpCode">
				<view :class="isHelp === 0 ? 'helpBottom' : ''" @click="isHelp=0">搭电</view>
				<view :class="isHelp === 1 ? 'helpBottom' : ''" @click="isHelp=1">换胎</view>
				<view :class="isHelp === 2 ? 'helpBottom' : ''" @click="isHelp=2">拖车</view>
			</view>

			<view class="helpContent" v-if="isHelp==2">
				<view class="label">起点</view>
				<view class="helpInput">
					<input type="text" v-model="help.beginAddress" placeholder-class="pInput" placeholder="请输入您的起点" />
				</view>
			</view>

			<view class="helpContent" v-else>
				<view class="label">位置</view>
				<view class="helpInput">
					<input type="text" v-model="help.address" placeholder-class="pInput" placeholder="请输入您的位置" />
				</view>
			</view>


			<view class="helpContent" v-if="isHelp==2">
				<view class="label">终点</view>
				<view class="helpInput">
					<input type="text" v-model="help.endAddress" placeholder-class="pInput" placeholder="请输入您的终点" />
				</view>
			</view>

			<view class="helpContent">
				<view class="label">求助人</view>
				<view class="helpInput">
					<input type="text" v-model="help.username" placeholder-class="pInput" placeholder="请输入您的姓名" />
				</view>
			</view>

			<view class="helpContent">
				<view class="label">联系方式</view>
				<view class="helpInput">
					<input type="tel" v-model="help.tel" placeholder-class="pInput" placeholder="请输入您的联系方式" />
				</view>
			</view>

			<view class="helpContent">
				<view class="label">车牌</view>
				<view class="helpInput">
					<input type="text" v-model="help.carId" placeholder-class="pInput" placeholder="请输入您的车牌" />
				</view>
			</view>

			<view class="helpContent2">
				<view class="label">描述</view>
				<view class="helpInput2">
					<textarea v-model="help.description" style="width: 100%; height: 100%;" name="" id="" cols="20"
						rows="10" placeholder-class="pInput" placeholder="请准确描述当前的状况及其所需的帮助"></textarea>
				</view>
			</view>

			<view class="yesHelp">
				<button @click="toHelp()">呼叫救援</button>
				<view @click="toHelpHistory">救援记录 ></view>
			</view>
		</view>

		<view class="headText2" style="margin-top: 20rpx; padding-bottom: 30rpx;">
			<view class="buttonText">
				警务求助
			</view>
			<view class="iconItems">
				<view class="iconItem">
					<image src="/static/images/交通事故 拷贝.png" mode="aspectFit"></image>
					<view class="iconText1">
						交通事故
					</view>
					<view class="iconText2">
						122
					</view>
				</view>

				<view class="iconItem">
					<image src="/static/images/火警.png" mode="aspectFit"></image>
					<view class="iconText1">
						火警
					</view>
					<view class="iconText2">
						119
					</view>
				</view>

				<view class="iconItem">
					<image src="/static/images/急救包.png" mode="aspectFit"></image>
					<view class="iconText1">
						急救中心
					</view>
					<view class="iconText2">
						120
					</view>
				</view>

				<view class="iconItem">
					<image src="/static/images/警察,公安.png" mode="aspectFit"></image>
					<view class="iconText1">
						公安报警
					</view>
					<view class="iconText2">
						110
					</view>
				</view>
			</view>
		</view>


		<view class="buttonDiv" />

	</view>
	<!-- 自定义 TabBar -->
	<CustomTabbar />
</template>

<script>
	import CustomTabbar from '@/uni_modules/components/custom-tab-bar/custom-tab-bar.vue';
	export default {
		components: {
			CustomTabbar 
		},
		data() {
			return {
				latitude: 34.74821,
				longitude: 113.61332,
				isHelp: 0, // 搭电0 换胎1 拖车2
				help: {
					address: '',
					beginAddress: '',
					endAddress: '',
					username: '',
					tel: '',
					carId: '',
					description: '',
				},

			}
		},
		onLoad() {
			// 获取当前位置
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.latitude = res.latitude
					this.longitude = res.longitude
				}
			})
		},
		methods: {
			toHelpHistory() {
				uni.navigateTo({
					url: "/pages/rescue/helpHistory/helpHistory"
				})
			},
			toHelp() {
				console.log(this.help);
			}
		}
	}
</script>

<style scoped>
	.headCss {
		background-color: #3385fd;
		width: 750rpx;
		height: 300rpx;
		position: fixed;
	}

	.headText {
		background-color: #fff;
		padding: 20rpx 0rpx;
		border-radius: 20rpx;
		width: 710rpx;
		min-height: 400rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.headText2 {
		background-color: #fff;
		padding: 20rpx 0rpx;
		border-radius: 20rpx;
		width: 710rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.map {
		width: 670rpx;
		margin-left: 20rpx;
		height: 400rpx;
		border-radius: 20rpx;
	}

	.helpCode {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
		align-items: center;

	}

	.helpCode>view {
		padding: 0rpx 20rpx;
		font-size: large;
		font-weight: 500;
		margin: auto;
		text-align: center;
	}

	.helpBottom {
		border-bottom: 7rpx solid #0d66e8;
	}

	.helpContent {
		padding: 20rpx 0rpx 0rpx 0rpx;
		margin-left: 20rpx;
		width: 670rpx;
		display: flex;
		align-items: center;
	}

	.helpContent2 {
		padding: 20rpx 0rpx 0rpx 0rpx;
		margin-left: 20rpx;
		width: 670rpx;
		display: flex;
	}

	.label {
		width: 175rpx;
		height: 40rpx;
		line-height: 40rpx;
		padding: 10rpx 0rpx;
		border-radius: 30rpx;
		background-color: #4fa2ff;
		color: aliceblue;
		text-align: center;
	}

	.helpInput {
		margin-left: 10rpx;
		width: 455rpx;
		height: 40rpx;
		/* line-height: 40rpx; */
		border: 2rpx solid #9a9a9a;
		border-radius: 30rpx;
		padding: 10rpx 0rpx;
		padding-left: 20rpx;
	}

	.helpInput2 {
		margin-left: 10rpx;
		width: 455rpx;
		height: 200rpx;
		/* line-height: 40rpx; */
		border: 2rpx solid #9a9a9a;
		border-radius: 30rpx;
		padding: 10rpx 0rpx;
		padding-left: 20rpx;
	}

	.pInput {
		font-size: small;
	}

	.yesHelp {
		margin-top: 40rpx;
	}

	.yesHelp>button {
		background: linear-gradient(to right, #ff7438, #ff4000);
		width: 70%;
		border-radius: 40rpx;
		color: aliceblue;
	}

	.yesHelp>view {
		color: #9a9a9a;
		font-size: small;
		text-align: center;
		margin-top: 20rpx;
	}

	.buttonText {
		margin-left: 20rpx;
		font-size: large;
		font-weight: 500;
		margin-bottom: 20rpx;
	}

	.iconItems {
		display: flex;
		margin: auto;

	}

	.iconItem {
		/* border: 1rpx solid red; */
		width: 150rpx;
		margin: auto;
		text-align: center;
	}

	.iconItem>image {
		width: 50rpx;
		height: 50rpx;
	}

	.iconText1 {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		font-size: small;
		font-weight: 500;
	}

	.iconText2 {
		font-size: x-small;
		font-family: 'Times New Roman', Times, serif;
		font-style: oblique;
	}

	.buttonDiv {
		width: 100rpx;
		height: 100rpx;
	}
</style>